<script setup name="new-album">
import { computed } from "vue"
import { Right, MoreOne } from '@icon-park/vue-next'
import IconPark from '@/components/common/IconPark.vue'

const props = defineProps({
  albumlist: {
    type: Array
  },
  loading: {
    type: Boolean
  },
  count: {
    type: Number
  }
})

const chunkedAlbumList = computed(() => {
  let index = 0
  const arrayLength = props.albumlist.length
  const tempArray = []
  for (index = 0; index < arrayLength; index += 4) {
    let chunk = props.albumlist.slice(index, index + 4)
    tempArray.push(chunk)
  }
  return tempArray
})
</script>

<template>
  <div class="new-album">
    <div class="more">
      <h3>新碟上架</h3>
      <IconPark :icon="Right" theme="filled" :size="5" />
      <IconPark :icon="MoreOne" theme="filled" :size="5" />
    </div>
    <van-skeleton v-if="loading" v-for="i in 4" :key="i">
      <template #template>·
        <van-skeleton-image />
        <div class="skeleton-item-row">
          <van-skeleton-paragraph row-width="50%" />
          <van-skeleton-paragraph row-width="20%" />
          <van-skeleton-paragraph row-width="40%" />
        </div>
      </template>
    </van-skeleton>
    <van-swipe v-else :show-indicators="false" :width="360" :loop="false">
      <van-swipe-item v-for="(chunk, index) in chunkedAlbumList" :key="index">
        <RouterLink :to="{ path: '/album', query: { id: item.id } }" class="item" v-for="item in chunk" :key="item.id">
          <div class="faceImg">
            <van-image :src="`${item.picUrl}?param=80y80`" radius="6" />
          </div>
          <div class="info">
            <van-text-ellipsis v-if="item.name" class="album-name" :content="item.name" rows="1" />
            <div class="artist-name">
              {{ item.alias[0] }} <span v-if="item.alias[0]">-</span> {{ item.artist.name }}
            </div>
            <van-tag :type="item.type == 'EP' ? 'primary' : 'success'">{{ item.type }}</van-tag>
          </div>
        </RouterLink>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<style scoped lang="scss">
.new-album {
  padding: 8px 6px;

  .van-swipe-item {
    .item {
      width: 340px;
      display: flex;
      align-items: center;
      padding: 4px;

      .info {
        width: 100%;
        padding-left: 10px;
        line-height: 16px;

        .album-name {
          font-size: 12px;
        }

        .artist-name {
          font-size: 10px;
          color: #ccc;
        }

        .van-tag {
          font-size: 10px;
          transform: scale(.8);
        }
      }
    }

  }

  .van-skeleton--animate {
    padding: 0;
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .van-skeleton-image {
      width: 54px;
      height: 54px;
      border-radius: 4px;
    }

    .skeleton-item-row {
      width: 80%;
      margin-left: 10px;

      .van-skeleton-paragraph {
        height: 10px;
      }
    }
  }
}
</style>
